列プレゼンターの追加

Spread.Viewsでは、列データに各種のプレゼンターを適用することで、グリッドの視覚的な効果を高めることができます。列プレゼンターの定義には、doT.js書式を使用します。doT.js書式は、パフォーマンスに優れ、高速性と見やすさを兼ね備えたJavaScriptテンプレート機能です。doT.jsの詳細については、http://olado.github.io/doT/index.htmlを参照してください。

次のサンプルコードは、チェックボックスおよびデータバープレゼンターをグリッド列に適用する手順を示します。

サンプルコード

以下の手順では、グリッドの初期化と列の定義を終えていることを前提としています。詳細については、「基本的なグリッドの作成」および「列の定義」を参照してください。

1. 「% Complete」列に対し、データバープレゼンター変数を定義します。

    var percentCompleteColPresenter = '<span class="percent-complete-bar" style="background-color:{{? it.percentComplete<30}}#FE4A49{{?? it.percentComplete<60}}#FED766{{??}}#009FB7{{?}};width:{{=it.percentComplete}}%;"></span>';
       var percentCompleteColPresenter2 = '<span style="display:inline-block;width:{{=it.percentComplete}}px;"></span>';

2. 「Billable」列に対し、チェックボックスプレゼンター変数を定義します。

   var booleanColPresenter = '<input type="checkbox" disabled="disabled" {{? it.billable}}checked{{?}} />';

3. 列定義配列で、データバープレゼンターとチェックボックスプレゼンターを指定します。

    var columns = [{
                   id: 'title',
                   caption: 'Title',
                   dataField: 'title'
               }, {
                   id: 'duration',
                   caption: 'Duration',
                   dataField: 'duration',
                   presenter: durationPresenter,
                   cssClass: getColClass
               }, {
                   id: 'percentComplete',
                   caption: '% Complete',
                   dataField: 'percentComplete',
                   presenter: percentCompleteColPresenter
               }, {
                   id: 'percentComplete1',
                   caption: '% Complete',
                   dataField: 'percentComplete',
                   presenter: percentCompleteColPresenter2,
                   cssClass: getColClass,
                   width: 100,
                   allowResizing: false
               },
   
               {
                   id: 'start',
                   caption: 'Start',
                   dataField: 'start',
                   format: 'mm/dd/yyyy',
                   visible: !hiddenColumn
               }, {
                   id: 'finish',
                   caption: 'Finish',
                   dataField: 'finish',
                   format: 'mm/dd/yyyy',
                   visible: !hiddenColumn
               }, {
                   id: 'billable',
                   caption: 'Billable',
                   dataField: 'billable',
                   presenter: booleanColPresenter,
                   visible: !hiddenColumn
               }
       ];

4. DIVタグのグリッドIDを呼び出し、コードを初期化します。